<template>
	<view class="content">
		<!-- <view style="width: 100%; height: 80rpx; border: none; display: flex; justify-content: space-between; align-items: center; background-color: #fa341b">
			<view style="margin-left: 20rpx; color: #ffffff" @click="fanhui"><uni-icons style="color: #ffffff" type="arrowleft" size="30"></uni-icons></view>
			<view style="color: #ffffff; font-size: 30rpx; font-weight: 800; margin-right: 290rpx">任务详情</view>
		</view> -->
		<view class="toop">
			<view class="toop_a">
				<view class="ttp"></view>
				<view class="toopp">
					<view class="toopp_a">
						<p>{{ data.title }}</p>
					</view>
					<view class="toopp_b">赏{{ data.commission }}元</view>
				</view>
				<view class="toopl">
					<view class="toopl_a">剩余任务：{{ data.task_num }}</view>
					<view class="toopl_b">领取限制：{{ data.get_task }}</view>
				</view>
				<view class="toopl">
					<view class="toopl_a">截止日期：{{ data.complete }}截至</view>

					<view class="toopl_b">审核时长：最长{{ data.audit_time }}小时</view>
				</view>
			</view>
		</view>

		<view class="cen" style="margin-bottom: 20rpx">
			<view class="cen_a">
				<view class="cen_aa"></view>
				<view class="cen_ab">操作流程</view>
			</view>
			<u-parse :html="data.content" :selectable="true" style="width: 650rpx; margin-left: 20rpx"></u-parse>
			<!-- <view class="cen_b">1、领取任务>2、提交任务>3、获得佣金</view><view class="cen_b">请先领取任务再做，做完提交凭证，否则无佣金</view> -->
		</view>
		<u-button v-if="data.video" type="primary" shape="square" :ripple="true" plain style="width: 85vw" @click="startVideo"> {{ show ? "关闭" : "开启" }}视频教程 </u-button>
		<view class="" style="width: 100vw; margin-top: 20rpx" v-if="data.video && show">
			<video :src="data.video" controls style="margin: 0 auto; width: 100vw"></video>
		</view>

		<!-- 任务步骤 -->
		<view style="background-color: #ffffff; margin: 0 auto; padding: 20rpx 20rpx 180rpx 20rpx; margin-top: 20rpx" v-if="data.steps !== false">
			<view style="display: flex; align-items: center">
				<view style="width: 2px; height: 32rpx; background-color: #fa341b"></view>
				<text style="font-size: 30rpx; color: #333333; font-weight: bold; margin-left: 8rpx">任务步骤</text>
			</view>

			<view style="margin-top: 18rpx; margin-bottom: 140rpx">
				<view style="display: flex; margin-bottom: 20rpx" v-for="(i, index) in data.steps" :key="index">
					<view style="display: flex; flex-direction: column; justify-content: center; align-items: center">
						<view style="width: 40rpx; height: 40rpx; background-color: #fa341b; border-radius: 50%; display: flex; justify-content: center; align-items: center">
							<text style="color: #ffffff; font-size: 28rpx; font-weight: bold; line-height: 40rpx; text-align: center">{{ i.step }}</text>
						</view>
						<view style="width: 2px; height: 100%; background-color: #fa341b"></view>
					</view>

					<view v-if="i.input_type == 3 || i.input_type == 2 || i.input_type == 4 || i.input_type == 1" style="display: flex; flex-direction: column; margin-left: 18rpx; justify-content: space-between">
						<text style="display: block; font-size: 24rpx; color: #333333; font-weight: bold">{{ i.title }}</text>

						<view style="margin-top: 22rpx; display: flex; height: 500rpx" v-if="i.input_type == 3 || i.input_type == 2 || i.input_type == 4 || i.input_type == 1">
							<image :src="i.picture" mode="aspectFit" style="width: 280rpx; height: 100%; margin-top: 10rpx" @click="preview(i.picture)" @load="dynaAcq"></image>

							<!-- 
							<block v-for="(item2,index2) in i.content" :key="index2" >
								<image
									v-if="item2.startsWith('http')"
									:src="item2"
									mode="aspectFit"
									style="width: 280rpx;height: 100%;margin-top: 10rpx;"
									@click="preview(item2)"
								></image>
							</block>	 -->

							<view
								v-show="index == 0 && id == 0"
								:src="i.picture"
								style="width: 280rpx; height: 100%; margin-top: 10rpx; background-color: #999999; margin-left: -285rpx; z-index: 1; color: #ffffff; text-align: center; line-height: 500rpx"
							>
								请先接单
							</view>

							<view class="ddd" v-if="i.input_type == 3 || i.input_type == 2">
								<view class="image" @click="changeImg(i)" v-if="i.tempFilePaths">
									<image :src="i.tempFilePaths" mode="aspectFill"></image>
								</view>

								<view class="image" v-else-if="i.content && i.content.length !== 0">
									<block v-for="(item1, index1) in i.content" :key="index1">
										<image v-if="item1.startsWith('http')" :src="item1" mode="aspectFill" @click="changeImg(i)"></image>
									</block>
								</view>

								<view class="image" v-else @click="shanchuan(i)"><u-icon name="plus" color="#ccc" size="150"></u-icon></view>
							</view>

							<!-- <u-upload
								v-if="i.input_type == 3 || i.input_type == 2"
								width="280rpx"
								height="500rpx"
								max-count="1"
								:action="action"
								:auto-upload="true"
								@on-success="success1"
							></u-upload> -->
						</view>
						<view v-if="i.input_type == 3 || i.input_type == 1">
							<view style="padding-top: 2rpx; width: 600rpx; height: 60rpx; background-color: #f5f6fa; border-radius: 10rpx; color: #333333; margin-top: 20rpx; margin-bottom: 10rpx">
								<input type="text" :placeholder="i.content" v-model="i.value" @blur="enter()" style="font-size: 20rpx; margin-top: 16rpx; margin-left: 10rpx" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tijiao" @click="orders" v-if="id == 0" style=""><view class="tijiao_a">领取任务</view></view>

		<view class="" v-if="!judgment([1, 6], status)">
			<view class="tijiao1" @click="submit" v-if="id != 0 && audit != 2">
				<view class="tijiao_a" v-if="audit == 3">再次提交</view>
				<view class="tijiao_a" v-else>提交任务</view>
			</view>
			<view class="tijiao" @click="cancel" v-if="id != 0 && audit != 2"><view class="tijiao_a">取消任务</view></view>
		</view>
	</view>
</template>

<script>
import uploadImage from "../../../common/ossutil/uploadFile.js";
import uniIcons from "../../../components/uni-icons/uni-icons.vue";

export default {
	components: { uniIcons },
	data() {
		return {
			tempFilePaths: [],
			nickname: "",
			tid: "",
			id: "",
			data: [],
			content: [],
			url: [],
			show: false,
			is: true,
			audit: "",
			status: "",
			//action: 'https://jizhuan6688.com/api/upload/upload',
		};
	},
	onLoad(e) {
		console.log("e :>> ", e);
		e && (this.tid = e.tid);
		e && (this.id = e.id);
		e && (this.status = e.status);
		console.log("this.status :>> ", this.status);

		// console.log(this.tid, '审核中')
		// console.log(this.id, '审核中')

		uni.setNavigationBarColor({
			frontColor: "#ffffff",
			backgroundColor: "#FA341B",
			animation: {
				duration: 400,
				timingFunc: "easeIn",
			},
		});

		this.taskDetails(e.tid);
	},
	methods: {
		judgment(arr, cal) {
			return arr.includes(Number(cal));
		},
		fanhui() {
			wx.switchTab({
				url: "../renwu_a",
			});
		},
		shanchuan(i) {
			uni.chooseImage({
				count: 1,
				sourceType: ["album"],
				success: (res) => {
					uni.showLoading({
						mask: true,
					});
					uploadImage(res.tempFilePaths[0], "project-figure/", (result) => {
						console.log("result :>> ", result);

						i.tempFilePaths = result;
						console.log("i :>> ", i);
						this.$forceUpdate();
						//console.log('this.tempFilePaths :>> ', this.tempFilePaths);
						uni.hideLoading();
					});
				},
			});
		},
		changeImg(i) {
			console.log("i :>> ", i);
			uni.chooseImage({
				count: 1,
				sourceType: ["album"],
				success: (res) => {
					uni.showLoading({
						mask: true,
					});
					uploadImage(res.tempFilePaths[0], "project-figure/", (result) => {
						console.log("result :>> ", result);
						i.tempFilePaths = result;
						this.$forceUpdate();
						// this.tempFilePaths = [];
						// this.tempFilePaths = tempFilePaths;
						// console.log('this.tempFilePaths :>> ', this.tempFilePaths);
						uni.hideLoading();
					});
				},
			});
		},
		dynaAcq(e) {
			console.log("e:>> ", e);
		},
		startVideo() {
			this.show = !this.show;
		},
		preview(e) {
			uni.previewImage({
				urls: [e],
				longPressActions: {
					itemList: ["发送给朋友", "保存图片", "收藏"],
					success: function (data) {
						console.log("选中了第" + (data.tapIndex + 1) + "个按钮,第" + (data.index + 1) + "张图片");
					},
					fail: function (err) {
						console.log(err.errMsg);
					},
				},
			});
		},
		success1(index, lists) {
			this.url.push(index.url);
			console.log("this.url  :>> ", this.url);
		},
		enter() {},

		async taskDetails(tid) {
			let obj = {
				tid,
				oid: this.id,
				uid: uni.getStorageSync("uid"),
			};
			const res = await this.$u.post("api/task/task_details", obj, {});
			if (!res.code) uni.$showMsg();
			this.data = res.data;

			this.step = res.data.steps[res.data.steps.length - 1].step;
			console.log(this.step, "1111111111111111111111111111111111111111");
			if (res.total.audit) {
				this.audit = res.total.audit;
			}
		},
		// 接单
		async orders() {
			let obj = {
				uid: uni.getStorageSync("uid"),
				tid: this.tid,
			};
			const res = await this.$u.post("api/task/take_orders", obj, {});

			uni.$showMsg(res.msg);
			if (res.msg !== "任务同时可接5个") {
				setTimeout(function () {
					uni.switchTab({
						url: "../renwu_a",
					});
				}, 1000);
			}
		},
		// 提交
		async submit() {
			console.log("this.tempFilePaths :>> ", this.tempFilePaths);
			let info = {};
			//var is = true;
			//steps
			if (this.data.steps !== false) {
				this.data.steps.forEach((current) => {
					console.log(current);

					if (current.input_type == 1) {
						if (!current.value) {
							this.is = false;
							return uni.$showMsg("不能为空!");
						}

						info[current.step] = [current.value];
					} else if (current.input_type == 2) {
						if (!current.tempFilePaths) {
							this.is = false;
							return uni.$showMsg("请上传图片!");
						}

						info[current.step] = [current.tempFilePaths];
					} else if (current.input_type == 3) {
						if (!current.tempFilePaths) {
							this.is = false;
							return uni.$showMsg("请上传图片!");
						}

						if (!current.value) {
							this.is = false;
							return uni.$showMsg("不能为空!");
						}

						info[current.step] = [current.value, current.tempFilePaths];
					} else {
						this.is = true;
					}
				});
			}

			console.log("this.is :>> ", this.is);
			console.log("info :>> ", info);
			if (this.is == true) {
				let obj = {
					oid: this.id,
					content: info,
				};
				const res = await this.$u.post("api/task/task_add_order", obj, {});
				if (res.msg !== "缺少参数") {
					uni.$showMsg(res.msg);
				}
				setTimeout(function () {
					uni.switchTab({
						url: "../renwu_a",
					});
				}, 1000);
				console.log("res >>  ", res);
			}
			//is = true
		},
		// 取消
		async cancel() {
			let obj = {
				uid: uni.getStorageSync("uid"),
				oid: this.id,
			};
			const res = await this.$u.post("api/task/task_cancel", obj, {});

			uni.$showMsg(res.msg);
			setTimeout(function () {
				uni.switchTab({
					url: "../renwu_a",
				});
			}, 1000);
			console.log("res >>  ", res);
		},
	},
};
</script>

<style lang="scss" scoped>
.ddd {
	display: flex;
	//justify-content: flex-start;
	flex-wrap: wrap;
	//padding: 0  30rpx;
	image {
		width: 100%;
		height: 100%;
	}
	.image {
		width: 280rpx;
		height: 100%;
		border: 1rpx solid #606266;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 40rpx;
		margin-bottom: 20rpx;
	}
}
.content {
	width: 100%;
	height: 100vh;
	background-color: #f5f8fd;
}
.toop {
	width: 100%;
	height: 100rpx;
	margin-bottom: 110rpx;
	.toop_a {
		margin: auto;
		height: 192rpx;
		background-color: #ffffff;
		.ttp {
			width: 300px;
			margin: auto;
			height: 30rpx;
		}
		.toopp {
			width: 650rpx;
			margin: auto;
			height: 50rpx;
			display: flex;
			justify-content: space-between;
			.toopp_a {
				width: 460rpx;
				height: 50rpx;
				display: flex;
				p {
					width: 450rpx;
					color: #333333;
					font-size: 32rpx;
					font-weight: bold;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				span {
					display: block;
					width: 180rpx;
					height: 50rpx;
					line-height: 56rpx;
					font-size: 20rpx;
					color: #666666;
				}
			}
			.toopp_b {
				height: 50rpx;
				line-height: 50rpx;
				text-align: right;
				text-align: center;
				color: #fa341b;
				font-weight: bold;
			}
		}
		.toopl {
			width: 650rpx;
			margin: auto;
			height: 40rpx;
			margin-top: 10rpx;
			display: flex;
			justify-content: space-between;
			.toopl_a {
				width: 350rpx;
				height: 40rpx;
				color: #333333;
				font-size: 24rpx;
			}
			.toopl_b {
				width: 300rpx;
				height: 40rpx;
				color: #333333;
				font-size: 24rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
}
.cen {
	margin: auto;
	height: 200rpx;
	background-color: #ffffff;
	padding-top: 15rpx;
	.cen_a {
		width: 650rpx;
		margin: auto;
		height: 60rpx;
		color: #333333;
		font-weight: bold;
		display: flex;
		margin-bottom: 10rpx;
		.cen_aa {
			width: 3px;
			height: 35rpx;
			background-color: #fa341b;
			margin-top: 12rpx;
			margin-right: 8rpx;
		}
		.cen_ab {
			height: 60rpx;
			line-height: 60rpx;
			color: #333333;
			font-weight: bold;
		}
	}
	.cen_b {
		width: 650rpx;
		margin: auto;
		height: 45rpx;
		margin-top: 10rpx;
		color: #333333;
		font-weight: bold;
		font-size: 24rpx;
	}
}

.tijiao1 {
	width: 100%;
	height: 100rpx;
	background-color: #ffffff;
	position: fixed;
	bottom: 100rpx;
	z-index: 99;
	.tijiao_a {
		width: 690rpx;
		margin: auto;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #fa341b;
		border-radius: 10rpx;
		margin-top: 10rpx;
		color: #ffffff;
		font-weight: bold;
		font-size: 32rpx;
	}
}

.tijiao {
	width: 100%;
	height: 100rpx;
	background-color: #ffffff;
	position: fixed;
	bottom: 0;
	z-index: 99;
	.tijiao_a {
		width: 690rpx;
		margin: auto;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #fa341b;
		border-radius: 10rpx;
		margin-top: 10rpx;
		color: #ffffff;
		font-weight: bold;
		font-size: 32rpx;
	}
}
</style>
